<template>
  <div class="comp2-container boxss">
    <div class="titles">在售库存</div>
      <div class="flex comp2-box">
        <div>
          <div class="flex flexa">
            <img src="@/assets/img/index/comp2-1.png" alt="数量">
            <span class="num-title">数量</span>
          </div>
          <div class="num" v-if="checkPermi(['home:Inventory:statistics'])">
            <count-to :start-val="0" :end-val="sale.count" :duration="1500"/>
          </div>
          <div class="num"  v-else>***</div>
        </div>
        <div>
          <div class="flex flexa">
            <img src="@/assets/img/index/comp2-2.png" alt="成本">
            <span class="num-title">成本</span>
          </div>
          <div class="num" v-if="checkPermi(['home:Inventory:statistics'])">
            <count-to :start-val="0" :end-val="sale.cost" :duration="1500"/>
          </div>
          <div class="num"  v-else>***</div>
        </div>
        <div>
          <div class="flex flexa">
            <img src="@/assets/img/index/comp2-3.png" alt="售价">
            <span class="num-title">售价</span>
          </div>
          <div class="num" v-if="checkPermi(['home:Inventory:statistics'])">
            <count-to :start-val="0" :end-val="sale.sells" :duration="1500"/>
          </div>
          <div class="num"  v-else>***</div>
        </div>
        <div>
          <div class="flex flexa">
            <img src="@/assets/img/index/comp2-4.png" alt="预估利润">
            <span class="num-title">预估利润</span>
          </div>
          <div class="num" v-if="checkPermi(['home:Inventory:statistics'])">
            <count-to :start-val="0" :end-val="sale.profit" :duration="1500"/>
          </div>
          <div class="num"  v-else>***</div>
        </div>
      </div>
  </div>
</template>
<script>
import homeApi from "@/api/home/newIndex";
import countTo from "vue-count-to"

export default {
  components: {
    countTo
  },
  data() {
    return {
      sale: {},
    }
  },
  mounted() {
    this.getSale()
  },
  methods: {
    async getSale() {
      const res = await homeApi.sale()
      this.sale = res.data
    }
  },

}
</script>
<style lang="scss" scoped>
@import url('./style.css');

.comp2-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .titles {
    height: 20px;
  }

}

.comp2-box {
  justify-content: space-around;
  margin: 36px 5px 0;
  text-align: center;
}

img {
  width: 18px;
}

.num-title {
  color: #666;
  font-size: 14px;
  margin-left: 4px;
}

.num {
  margin-top: 16px;
  font-weight: 500;
  font-size: 20px;
  color: #333333;
}
</style>
